/**
 * Created by Administrator on 2017/6/29.
 */
var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin'); //自动在打包后的路径下生成一个index.html并将生成的js插入到该页面中
var ROOT_PATH = path.resolve(__dirname); // 定义一些文件夹的路径
var APP_PATH = path.resolve(ROOT_PATH, 'app'); //定义源代码文件夹的路径
var BUILD_PATH = path.resolve(ROOT_PATH, 'build'); //定义build文件夹的路径

module.exports={
  //项目的入口文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
    entry: APP_PATH,
  //输出的文件名 合并以后的js会命名为bundle.js
    output:{
      filename: 'bundle.js',
      path: BUILD_PATH,
    },
  //使用HtmlwebpackPlugin插件，打包完成后会自动在打包路径下生成一个html文件并将bundle.js插入到html中
    plugins: [
      new HtmlwebpackPlugin({
        title: 'hello world app', //设置生成的html的title值
      }),
    ],
    module:{
      rules:[
        {
          test:/\.css$/,
          // css-loader会遍历css文件，找到所有的url(...)并且处理。style-loader会把所有的样式插入到你页面的一个style tag中,loaders的处理顺序是从右到左的，这里就是先运行css-loader然后是style-loader
          use:[
                    'style-loader',
                    'css-loader?sourceMap'
          ],
          include: APP_PATH  // APP_PATH路径下的.css文件使用style-loader和css-loader进行预处理
        },
        {
          test:/\.(png|jpg|gif|svg)/, //处理图片文件
          use:['file-loader']
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/, //处理字体文件
          use: [
            'file-loader'
          ]
        },
        {
          test:/\.js$/, //处理js文件
          use:['babel-loader'],
          include: APP_PATH,
        },
        {
          test:/\.scss$/, //处理sass文件
          use:[
            'style-loader',
            'css-loader?sourceMap',
            'sass-loader?sourceMap', // 为css添加sourceMap，定位出错的位置
          ]
        },
        {
          test:/\.html$/, //处理html文件
          use:['html-loader'],
        }
      ],
      // preLoaders顾名思义就是在loaders执行之前处理的，webpack的处理顺序是preLoaders - loaders - postLoaders。
      // preLoaders:[
      //   {
      //     test: /\.jsx?$/,
      //     include: APP_PATH,
      //     loader: 'jshint-loader' // 检查自己的js是否符合jshint的规范
      //   }
      // ]
    },
  // 新建一个开发服务器，可以serve我们pack以后的代码，并且当代码更新的时候自动刷新浏览器,而不用我们手动编译再引入到html中,启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中
    devServer: {
      contentBase: path.resolve(__dirname, 'app'),
      port: 9000,
      hot: true,
      inline: true,
      //代理，重启以后 发现/api/*的请求都代理到http://localhost:5000去了～
      proxy: {
        '/api/*': {
          target: 'http://localhost:5000',
          secure: false
        }
      }
    },
    devtool: 'source-map', //合并以后的代码不利于排错和定位，source-map可以直接显示出你错误代码的具体位置

}